<script setup>
	// 调用list方法获取服务器待提货单数据
	//  1. 导入 apis/task.js
	import taskApi from '@/apis/task.js'
	import { onMounted, ref } from 'vue'
	// 2. 在生命周期方法 onMouted中来请求服务器数据
	const list = ref([])
	const isTriggered = ref(false)
	let page = 1
	onMounted(async () => {
		let res = await taskApi.list()
		// 3. 定义响应式数据来接收服务器的数组并渲染到页面上
		list.value = res.data.data.items
	})
	// 上拉分页（触底触发的函数）
	async function onScrollToLower() {
		page++ // 增加页面数量
		// 将新的页码对应的数据加载回来
		let res = await taskApi.list(1, page, 10)
		// 判断如果没有数据，则不追加，否则追加
		if (res.data.data.items) {
			// 使用数组的push方法，将服务器最新的数据追加到页面的最下方
			list.value.push(...res.data.data.items)
			console.log('已经触底...', page)
		}
	}
	// 下拉刷新
	async function onScrollViewRefresh() {
		// 重新请求第一页数据，将来接口有新数据我们就可以获取最新数据
		// 温馨提示：由于我们的接口没有人维护数据，所以第1页数据是老数据
		console.log('下拉刷新触发...')
		// 将page重置为1
		isTriggered.value = true //打开下拉刷新动画
		page = 1
		let res = await taskApi.list(1, page, 10)
		list.value = res.data.data.items
		isTriggered.value = false //关闭下拉刷新动画
	}
</script>

<template>
	<scroll-view scroll-y refresher-enabled class="scroll-view" @scrolltolower="onScrollToLower"
		@refresherrefresh="onScrollViewRefresh" :refresher-triggered="isTriggered">
		<view class="scroll-view-wrapper">
			<view class="task-card" v-for="item in list" :key="item.id">
				<navigator hover-class="none" :url="'/subpkg_task/detail/index?id=' + item.id">
					<view class="header">
						<text class="no">任务编号: {{ item.transportTaskId }}</text>
						<!-- <text class="status">已延迟</text> -->
					</view>
					<view class="body">
						<view class="timeline">
							<view class="line">{{ item.startAddress }}</view>
							<view class="line"> {{ item.endAddress }}</view>
						</view>
					</view>
				</navigator>
				<view class="footer">
					<view class="label">提货时间</view>
					<view class="time">{{ item.planDepartureTime }}</view>
					<!-- 可点击的提货按钮 -->
					<navigator v-if="item.enablePickUp" hover-class="none"
						:url="'/subpkg_task/pickup/index?id=' + item.id" class="action">提货</navigator>
					<button hover-class="none" v-if="!item.enablePickUp" class="action" :disabled="!item.enablePickUp">
						提货
					</button>
				</view>
			</view>
			<view v-if="false" class="task-blank">无待提货物</view>
		</view>
	</scroll-view>
</template>

<style lang="scss" scoped>
	@import './styles.scss';
</style>